<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    h1{
        
        height: 40px;
        margin: 0 auto;
        text-align: center;
    }
    #guanli{
        width: 60%;
        height: 100px;
        margin-left: 20%;
        margin-top: 30px;
        margin-bottom: 40px;
        background-color: darkgrey;
        border-radius: 10%;
    }
    h2{
        line-height: 100px;
        text-align: center;
        margin: 0;
        color: #fff;
    }
    h4{
        margin-left: 50px;
    }
    #zhoubian{
        width: 100%;
    }
    #shangpin{
        width: 100%;
        margin-top: 30px;
        display: flex;
    }
    #shangjia{
        text-align: center;
        flex-grow: 1;
        border: 1px solid #000;
        border-radius: 5%;
    }
    #xiajia{
        text-align: center;
        flex-grow: 1;
        border: 1px solid #000;
        background-color: darkgray;
        border-radius: 5%;
    }
    #kongbai{
        flex-grow: 1;
    }
</style>
<body>
    <h1>管理员管理系统</h1>
    <div id="guanli">
        <h2>管理演出方业务</h2>
    </div>
    <div id="guanli">
        <h2>查看用户反馈</h2>
    </div>
    <div id="guanli">
        <h2>发布系统通知</h2>
    </div>
    <div id="zhoubian">
        <h4>管理周边商品</h4>
        <div id="shangpin">
            <div id="kongbai"></div>
            <div id="shangjia">
                <p>上架周边</p>
            </div>
            <div id="kongbai"></div>
            <div id="xiajia">
                <p>下架周边</p>
            </div>
            <div id="kongbai"></div>
        </div>
    </div>
</body>
</html>